/**
@gray: #868e96;
@brown: #a57868;
@red: #f03e3e;
@orange: #f76707;
@yellow: #f59f00;
@green: #37b24d;
@teal: #0ca678;
@blue: #1c7ed6;
@indigo: #4263eb;
@purple: #ae3ec9;
@pink: #d6336c;
@cyan: #1098ad;

@lgray: #f8f9fa;
@lbrown: #e8dcd8;
@lred: #fff5f5;
@lorange: #fff4e6;
@lyellow: #fff9db;
@lgreen: #ebfbee;
@lteal: #e6fcf5;
@lblue: #e7f5ff;
@lindigo: #edf2ff;
@lpurple: #f8f0fc;
@lpink: #fff0f6;
@lcyan: #e3fafc;

@primary: @blue;
@success: @green;
@info: @cyan;
@warning: @yellow;
@danger: @red;

// 默认颜色的配置
@lprimary: @lblue;
@lsuccess: @lgreen;
@linfo: @lcyan;
@lwarning: @lyellow;
@ldanger: @lred;

@color-list: gray, brown, red, orange, yellow, green, teal, blue, indigo, purple, pink, cyan, primary, success,info,warning,danger;

.make-colors(@colors) {
  .generate-colors(length(@colors));

  .generate-colors(@name, @i: 1) when (@i =< length(@colors)) {
    @name: extract(@colors, @i);
    // 变量名称 ex: @blue, 具体当颜色使用时需要 @@color
    @color:  '@{name}';
    @lcolor: 'l@{name}';
    :root {
      --nom-color-@{name}: @@color;
      --nom-color-l@{name}: @@lcolor; // light 浅色模式
      --nom-color-@{name}-lighten: lighten(@@color, 40%); // less计算亮度后 
      --nom-color-@{name}-saturate-light: saturate(lighten(@@color, 10%), -2.5%); // 添加亮度,减少饱和度 
      --nom-color-l@{name}-saturate-light: saturate(lighten(@@lcolor, 2.5%), -2.5%); // 在lcolor基础上 添加亮度,减少饱和度

      --nom-color-@{name}-darken: darken(@@color, 5%); // less计算亮度后 
      --nom-color-@{name}-saturate-dark: saturate(darken(@@color, 10%), 2.5%); // 减少亮度,添加饱和度 
      --nom-color-l@{name}-saturate-dark: saturate(darken(@@lcolor, 5%), 2.5%); // 在lcolor基础上 减少亮度,添加饱和度
    }

    .generate-colors(@name, @i + 1);
  }
}

// 计算得出下面的 css变量
.make-colors(@color-list);
*/

// 颜色变量 通过以上Less代码生成
:root {
  // gray
  --nom-color-gray: #868e96; // 基础颜色
  --nom-color-lgray: #f8f9fa; // 浅色模式
  --nom-color-gray-lighten: #f3f4f5; // 浅色模式 增加亮度
  --nom-color-gray-saturate-light: #a3a8ac; // 添加亮度,减少饱和度 
  --nom-color-lgray-saturate-light: #fff; // 在lcolor基础上 添加亮度,减少饱和度
  --nom-color-gray-darken: #78818a; // 深色模式 减少亮度
  --nom-color-gray-saturate-dark: #697580; // 减少亮度,添加饱和度 
  --nom-color-lgray-saturate-dark: #e9ecf0; // 在lcolor基础上 减少亮度,添加饱和度
  // brown
  --nom-color-brown: #a57868;
  --nom-color-lbrown: #e8dcd8;
  --nom-color-brown-lighten: #f1eae8;
  --nom-color-brown-saturate-light: #b6968a;
  --nom-color-lbrown-saturate-light: #ece4e1;
  --nom-color-brown-darken: #996b5b;
  --nom-color-brown-saturate-dark: #8b5f4f;
  --nom-color-lbrown-saturate-dark: #e0cdc7;
  // red
  --nom-color-red: #f03e3e;
  --nom-color-lred: #fff5f5;
  --nom-color-red-lighten: #fffbfb;
  --nom-color-red-saturate-light: #f26f6f;
  --nom-color-lred-saturate-light: #fff;
  --nom-color-red-darken: #ee2626;
  --nom-color-red-saturate-dark: #ec0f0f;
  --nom-color-lred-saturate-dark: #ffdcdc;
  // orange
  --nom-color-orange: #f76707;
  --nom-color-lorange: #fff4e6;
  --nom-color-orange-lighten: #fee0cc;
  --nom-color-orange-saturate-light: #f7863a;
  --nom-color-lorange-saturate-light: #fffaf3;
  --nom-color-orange-darken: #de5d06;
  --nom-color-orange-saturate-dark: #c85203;
  --nom-color-lorange-saturate-dark: #ffe9cc;
  // yellow
  --nom-color-yellow: #f59f00;
  --nom-color-lyellow: #fff9db;
  --nom-color-yellow-lighten: #ffeac2;
  --nom-color-yellow-saturate-light: #fcb32c;
  --nom-color-lyellow-saturate-light: #fffbe8;
  --nom-color-yellow-darken: #dc8e00;
  --nom-color-yellow-saturate-dark: #c27e00;
  --nom-color-lyellow-saturate-dark: #fff5c2;
  // green
  --nom-color-green: #37b24d;
  --nom-color-lgreen: #ebfbee;
  --nom-color-green-lighten: #c7eece;
  --nom-color-green-saturate-light: #55c76a;
  --nom-color-lgreen-saturate-light: #f6fdf7;
  --nom-color-green-darken: #319f45;
  --nom-color-green-saturate-dark: #298d3b;
  --nom-color-lgreen-saturate-dark: #d5f7dc;
  // teal
  --nom-color-teal: #0ca678;
  --nom-color-lteal: #e6fcf5;
  --nom-color-teal-lighten: #88f6d5;
  --nom-color-teal-saturate-light: #12d399;
  --nom-color-lteal-saturate-light: #f2fdf9;
  --nom-color-teal-darken: #0a8e67;
  --nom-color-teal-saturate-dark: #077856;
  --nom-color-lteal-saturate-dark: #cffaec;
  // blue
  --nom-color-blue: #1c7ed6;
  --nom-color-lblue: #e7f5ff;
  --nom-color-blue-lighten: #c6e0f8;
  --nom-color-blue-saturate-light: #4297e3;
  --nom-color-lblue-saturate-light: #f4faff;
  --nom-color-blue-darken: #1971bf;
  --nom-color-blue-saturate-dark: #1464ab;
  --nom-color-lblue-saturate-dark: #cdeaff;
  // indigo
  --nom-color-indigo: #4263eb;
  --nom-color-lindigo: #edf2ff;
  --nom-color-indigo-lighten: #fafbff;
  --nom-color-indigo-saturate-light: #728aee;
  --nom-color-lindigo-saturate-light: #fafbff;
  --nom-color-indigo-darken: #2b50e9;
  --nom-color-indigo-saturate-dark: #153de5;
  --nom-color-lindigo-saturate-dark: #d4e0ff;
  // purple
  --nom-color-purple: #ae3ec9;
  --nom-color-lpurple: #f8f0fc;
  --nom-color-purple-lighten: #f1ddf6;
  --nom-color-purple-saturate-light: #bd68d2;
  --nom-color-lpurple-saturate-light: #fdfbfe;
  --nom-color-purple-darken: #a034ba;
  --nom-color-purple-saturate-dark: #902ca8;
  --nom-color-lpurple-saturate-dark: #eedaf8;
  // pink
  --nom-color-pink: #d6336c;
  --nom-color-lpink: #fff0f6;
  --nom-color-pink-lighten: #f8dde6;
  --nom-color-pink-saturate-light: #dc608b;
  --nom-color-lpink-saturate-light: #fffdfe;
  --nom-color-pink-darken: #c72860;
  --nom-color-pink-saturate-dark: #b52155;
  --nom-color-lpink-saturate-dark: #ffd7e7;
  // cyan
  --nom-color-cyan: #1098ad;
  --nom-color-lcyan: #e3fafc;
  --nom-color-cyan-lighten: #94e8f5;
  --nom-color-cyan-saturate-light: #17bfd9;
  --nom-color-lcyan-saturate-light: #effcfd;
  --nom-color-cyan-darken: #0e8396;
  --nom-color-cyan-saturate-dark: #0a7080;
  --nom-color-lcyan-saturate-dark: #cbf6fa;
  // primary
  --nom-color-primary: #1c7ed6;
  --nom-color-lprimary: #e7f5ff;
  --nom-color-primary-lighten: #c6e0f8;
  --nom-color-primary-saturate-light: #4297e3;
  --nom-color-lprimary-saturate-light: #f4faff;
  --nom-color-primary-darken: #1971bf;
  --nom-color-primary-saturate-dark: #1464ab;
  --nom-color-lprimary-saturate-dark: #cdeaff;
  // success
  --nom-color-success: #37b24d;
  --nom-color-lsuccess: #ebfbee;
  --nom-color-success-lighten: #c7eece;
  --nom-color-success-saturate-light: #55c76a;
  --nom-color-lsuccess-saturate-light: #f6fdf7;
  --nom-color-success-darken: #319f45;
  --nom-color-success-saturate-dark: #298d3b;
  --nom-color-lsuccess-saturate-dark: #d5f7dc;
  // info
  --nom-color-info: #1098ad;
  --nom-color-linfo: #e3fafc;
  --nom-color-info-lighten: #94e8f5;
  --nom-color-info-saturate-light: #17bfd9;
  --nom-color-linfo-saturate-light: #effcfd;
  --nom-color-info-darken: #0e8396;
  --nom-color-info-saturate-dark: #0a7080;
  --nom-color-linfo-saturate-dark: #cbf6fa;
  // warning
  --nom-color-warning: #f59f00;
  --nom-color-lwarning: #fff9db;
  --nom-color-warning-lighten: #ffeac2;
  --nom-color-warning-saturate-light: #fcb32c;
  --nom-color-lwarning-saturate-light: #fffbe8;
  --nom-color-warning-darken: #dc8e00;
  --nom-color-warning-saturate-dark: #c27e00;
  --nom-color-lwarning-saturate-dark: #fff5c2;
  // danger
  --nom-color-danger: #f03e3e;
  --nom-color-ldanger: #fff5f5;
  --nom-color-danger-lighten: #fffbfb;
  --nom-color-danger-saturate-light: #f26f6f;
  --nom-color-ldanger-saturate-light: #fff;
  --nom-color-danger-darken: #ee2626;
  --nom-color-danger-saturate-dark: #ec0f0f;
  --nom-color-ldanger-saturate-dark: #ffdcdc;
}
